<template>
  <div class="app-container">
    <el-row>
      <el-col :span="24">
        <div class="h_top">
          <div class="bread_title">
            <span>点检工单详情</span>
          </div>
          <div class="save_button">
            <div v-if="userId === 308" class="buttonBox">
              <el-button type="danger" icon="el-icon-close" size="mini" @click="changeStatus">？</el-button>
            </div>
            <div v-if="canBz" class="buttonBox" hidden>
              <el-button type="danger" icon="el-icon-close" size="mini" @click="bzBackHandle">班长退回</el-button>
              <el-button type="success" icon="el-icon-circle-check" size="mini" @click="bzHandle">班长确认</el-button>
            </div>
            <div v-if="canEngineer" class="buttonBox" hidden>
              <el-button type="danger" icon="el-icon-close" size="mini" @click="engineerBackHandle">工程师退回</el-button>
              <el-button type="success" icon="el-icon-circle-check" size="mini" @click="engineerHandle">工程师确认</el-button>
            </div>
            <div class="buttonBox">
              <el-button type="primary" icon="el-icon-back" size="mini" @click="goBack">返回</el-button>
            </div>
            <div v-if="isOnce || !zy" class="buttonBox">
              <el-button type="primary" icon="el-icon-document-checked" size="mini" @click="save">保存</el-button>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <div>
      <el-row>
        <el-col :span="24">
          <el-form ref="form" :model="data" :inline="true" :rules="formRules">
            <el-input v-model="data.id" type="hidden" />
            <el-row :gutter="10">
              <el-col :span="4">
                <el-form-item prop="coding">
                  <div>编号</div>
                  <el-input v-model="data.coding" size="mini" :disabled="!isOnce" />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item prop="name">
                  <div>名称</div>
                  <el-input v-model="data.name" size="mini" :disabled="!isOnce" />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item prop="admin_id">
                  <div>负责人</div>
                  <v-select v-model="data.admin_id" :disabled="!isOnce" />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item>
                  <div>电话</div>
                  <el-input v-model="data.admin.phone" disabled size="mini" />
                </el-form-item>
              </el-col>
              <el-col :span="2">
                <el-form-item prop="profession">
                  <div>专业</div>
                  <el-select v-model="data.profession" size="mini" :disabled="!isOnce">
                    <el-option v-for="(item, index) in profession" :key="index" :label="item" :value="index" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="2">
                <el-form-item prop="profession">
                  <div>时长</div>
                  <el-input v-model="data.task_long" disabled size="mini" />
                </el-form-item>
              </el-col>
              <el-col :span="2">
                <el-form-item prop="type">
                  <div>类型</div>
                  <el-select v-model="data.type" size="mini" :disabled="!isOnce">
                    <el-option v-for="(item, index) in groupType" :key="index" :value="index" :label="item" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="2">
                <el-form-item prop="unit">
                  <div>单位</div>
                  <el-select v-model="data.unit" size="mini" :disabled="!isOnce">
                    <el-option v-for="(item,index) in planType" :key="index" :label="item" :value="index" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item prop="equipment_id">
                  <div>资产</div>
                  <v-select-s v-model="data.equipment_id" action="eqList" :query="{type:data.type,unit:data.unit}" :disabled="!isOnce" />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item prop="arrange_date">
                  <div>安排时间</div>
                  <el-date-picker v-model="data.arrange_date" type="datetime" placeholder="选择日期时间" align="right" value-format="yyyy-MM-dd HH:mm:ss" size="mini" :disabled="zy" />
                </el-form-item>
              </el-col>
              <el-col v-if="isOnce || giveOut" :span="2">
                <el-form-item prop="is_send">
                  <div>是否发送给负责人</div>
                  <el-select v-model="data.is_send" size="mini" :disabled="giveOut">
                    <el-option v-for="(item,index) in planSend" :key="index" :label="item" :value="index" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col v-if="isOnce || giveOut" :span="2">
                <el-form-item prop="bz_check">
                  <div>是否班长审核</div>
                  <el-select v-model="data.bz_check" size="mini" :disabled="giveOut">
                    <el-option v-for="(item,index) in planSend" :key="index" :label="item" :value="index" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col v-if="isOnce || giveOut" :span="2">
                <el-form-item prop="engineer_check">
                  <div>是否工程师审核</div>
                  <el-select v-model="data.engineer_check" size="mini" :disabled="giveOut">
                    <el-option v-for="(item,index) in planSend" :key="index" :label="item" :value="index" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col v-if="isOnce || giveOut" :span="4">
                <el-form-item prop="out_id">
                  <div>委外工单</div>
                  <v-select v-model="data.out_id" action="outList" :disabled="giveOut" />
                </el-form-item>
              </el-col>
              <el-col v-if="!isOnce && !giveOut" :span="4">
                <el-form-item prop="apply_id">
                  <div>维护计划</div>
                  <v-select v-model="data.plan_id" action="planList" :disabled="!isOnce" />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item>
                  <div>状态</div>
                  <el-input v-model="data.status" disabled size="mini" />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item>
                  <div>车间</div>
                  <el-select v-model="data.workshop" size="mini" disabled>
                    <el-option v-for="(item,workshopIndex) in planWorkshop" :key="workshopIndex" :label="item" :value="workshopIndex" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item prop="sort">
                  <div>排序</div>
                  <el-input v-model="data.sort" size="mini" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="10">
              <el-col v-if="data.qrcode_time" :span="4">
                <div class="mb10">首次扫码时间</div>
                <el-input v-model="data.qrcode_time" size="mini" readonly />
              </el-col>
              <el-col v-if="data.submit_complate" :span="4">
                <div class="mb10">完成时间</div>
                <el-input v-model="data.submit_complate" size="mini" readonly />
              </el-col>
              <el-col v-if="data.wxBz" :span="4">
                <div class="mb10">班长</div>
                <el-input v-model="data.bz_admin.name" size="mini" disabled />
              </el-col>
              <el-col v-if="data.wxBz_date" :span="4">
                <div class="mb10">班长确认时间</div>
                <el-date-picker v-model="data.wxBz_date" type="datetime" align="right" value-format="yyyy-MM-dd HH:mm:ss" size="mini" disabled />
              </el-col>
              <el-col v-if="data.engineer" :span="4">
                <div class="mb10">工程师</div>
                <el-input v-model="data.engineer_admin.name" size="mini" disabled />
              </el-col>
              <el-col v-if="data.engineer_date" :span="4">
                <div class="mb10">工程师确认时间</div>
                <el-date-picker v-model="data.engineer_date" type="datetime" align="right" value-format="yyyy-MM-dd HH:mm:ss" size="mini" disabled />
              </el-col>
            </el-row>
            <el-row v-if="userId === 308" :gutter="10">
              <el-col :span="4">
                <el-form-item>
                  <div>扫码时间</div>
                  <el-date-picker v-model="qrcode_time" type="datetime" placeholder="选择日期时间" align="right" value-format="yyyy-MM-dd HH:mm:ss" size="mini" @change="equalSubmitComplate" />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item>
                  <div>完成时间</div>
                  <el-date-picker v-model="submit_complate" type="datetime" placeholder="选择日期时间" align="right" value-format="yyyy-MM-dd HH:mm:ss" size="mini" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col v-if="userId === 308" :span="6">
                <el-button type="danger" icon="el-icon-close" size="mini" @click="changeStatus">？</el-button>
              </el-col>
            </el-row>
          </el-form>
          <el-tabs>
            <el-tab-pane label="详情">
              <template>
                <el-table :data="eqList">
                  <el-table-column label="资产" min-width="20%">
                    <template scope="scope">
                      <div v-if="scope.row.eq.admin">
                        {{ scope.row.eq.name }} - {{ scope.row.eq.coding }} - {{ scope.row.eq.admin.name }}
                      </div>
                      <div v-else>
                        {{ scope.row.eq.name }} - {{ scope.row.eq.coding }}
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column label="任务" min-width="15%" prop="task.name" />
                  <el-table-column label="参数" min-width="10%" prop="param.name" />
                  <el-table-column label="任务细节" min-width="15%" prop="task.detail" />
                  <el-table-column label="参数标准" min-width="30%" prop="param.standard" />
                  <el-table-column label="读数" min-width="15%">
                    <template scope="scope">
                      <div v-if="scope.row.param.category === 3">
                        <el-radio v-model="scope.row.reading" label="1">正常</el-radio>
                        <el-radio v-model="scope.row.reading" label="2">不正常</el-radio>
                      </div>
                      <div v-else>
                        <el-input v-model="scope.row.reading" />
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column label="执行者" min-width="10%" prop="admin.name" />
                  <el-table-column label="执行时间" min-width="15%" prop="update_time" />
                </el-table>
                <el-button v-if="data.status === 0" type="primary" icon="el-icon-circle-check" size="mini" class="submit-reading" @click="submitReading">提交</el-button>
              </template>
            </el-tab-pane>
            <el-tab-pane label="员工">
              <template>
                <el-row>
                  <el-col :span="24">
                    <el-table :data="staffList">
                      <el-table-column label="专业" prop="profession" min-width="24%" :formatter="professionFormat" />
                      <el-table-column label="计划的工时" prop="man_hour" min-width="34%" />
                      <el-table-column label="偏好的员工" prop="admin.name" min-width="34%" />
                      <el-table-column label="操作" min-width="8%">
                        <span>-</span>
                      </el-table-column>
                    </el-table>
                  </el-col>
                </el-row>
              </template>
            </el-tab-pane>
            <el-tab-pane label="描述">
              <el-row>
                <el-col :span="24">
                  <Tinymce id="content" v-model="data.content" />
                </el-col>
              </el-row>
            </el-tab-pane>
          </el-tabs>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import API from '@/api/maintain/pm'
import { applyType, applyMode, profession, planType, planSend, groupType, planWorkshop } from '@/utils/options'
import Tinymce from '@/components/Tinymce/index'
import VSelect from '@/components/select'
import VSelectS from '@/components/select-search'
import { mapGetters } from 'vuex'
export default {
  inject: ['backUrl', 'goUrl', 'delOne', 'update', 'reload', 'changePmStatus'],
  components: {
    Tinymce,
    VSelect,
    VSelectS
  },
  data() {
    return {
      data: {
        'admin': {
          'phone': ''
        },
        'cr_admin': {
          'name': ''
        },
        'eq': {
          'name': ''
        },
        out_id: ''
      },
      applyType,
      applyMode,
      profession,
      planType,
      groupType,
      planSend,
      planWorkshop,
      isOnce: false,
      zy: true,
      giveOut: false,
      isAdmin: true,
      canBz: false,
      canEngineer: false,
      staffList: [],
      eqList: [],
      staffData: {},
      editNumber: '',
      editId: '',
      formRules: {
        coding: [
          {
            required: true,
            message: '请输入编号',
            trigger: 'blur'
          }
        ],
        name: [
          {
            required: true,
            message: '请输入工单名称',
            trigger: 'blur'
          }
        ],
        admin_id: [
          {
            required: true,
            message: '请选择负责人',
            trigger: 'change'
          }
        ],
        profession: [
          {
            required: true,
            message: '请选择专业',
            trigger: 'change'
          }
        ],
        sort: [
          {
            required: true,
            message: '请输入排序',
            trigger: 'blur'
          }
        ]
      },
      submit_complate: '',
      qrcode_time: ''
    }
  },
  computed: {
    ...mapGetters([
      'userId'
    ])
  },
  created() {
    const id = this.$route.params.id
    API.getOne(id).then(response => {
      if (response.data.error_code) {
        this.$alert(response.data.message, '错误', {
          confirmButtonText: '确定',
          callback: () => {
            this.backUrl()
          }
        })
      }

      this.data = response.data
      this.staffList = response.data.other_member
      this.eqList = response.data.other_eq
      if (!response.data.plan_id) {
        this.isOnce = true
      }
      if (response.data.plan_id === -1) {
        this.giveOut = true
      }
      // 仅班长确认
      if (response.data.bz_check === 1 && response.data.engineer_check === 0) {
        if (response.data.status === 1) {
          this.canBz = true
        }
      }
      // 仅工程师确认
      if (response.data.bz_check === 0 && response.data.engineer_check === 1) {
        if (response.data.status === 1) {
          this.canEngineer = true
        }
      }
      // 班长和工程师都需要确认
      if (response.data.bz_check === 1 && response.data.engineer_check === 1) {
        if (response.data.status === 1) {
          this.canBz = true
        } else if (response.data.status === 2) {
          this.canEngineer = true
        }
      }
      if (response.data.plan_category === 2 || !response.data.plan_id) {
        this.zy = false
      }
      if (this.data.status === 0) {
        this.data.status = '系统'
      } else if (this.data.status === 1) {
        this.data.status = '完成'
      } else if (this.data.status === 10) {
        this.data.status = '超时'
      } else if (this.data.status === 99) {
        this.data.status = '停产'
      }
      if (this.data.qrcode_time) {
        this.qrcode_time = this.data.qrcode_time
        this.submit_complate = this.data.submit_complate
      }
    })
  },
  methods: {
    confirmDel() {
      const id = this.data.id
      this.delOne(API, id, true)
    },
    save() {
      const thisData = this.data
      const thisForm = this.$refs.form
      this.update(API, thisData, thisForm)
    },
    professionFormat(row) {
      if (row.profession === 0) {
        return '所有'
      } else if (row.profession === 1) {
        return 'ELE - 电气'
      } else if (row.profession === 2) {
        return 'MEC - 机械'
      }
    },
    getParts() {
      const needData = {
        id: this.data.id
      }
      API.needParts(needData).then(response => {
        if (response.data.error_code === 1) {
          this.$message.success('请求备件，请速去库房领件！')
          this.backUrl()
        } else {
          this.$message.error(response.data.message)
        }
      })
    },
    submitReading() {
      const reading = {
        reading: this.eqList,
        cm_category: 1
      }
      API.submitReading(reading).then((response) => {
        if (response.data.error_code === 1) {
          this.$message({
            message: '恭喜你，提交成功',
            type: 'success'
          })
          API.getOne(this.$route.params.id).then(response => {
            this.eqList = response.data.other_eq
          })
        } else if (response.data.error_code === 11) {
          this.$message({
            message: '参数不正常，已自动生成报修单',
            type: 'success'
          })
          API.getOne(this.$route.params.id).then(response => {
            this.eqList = response.data.other_eq
          })
        } else if (response.data.error_code === 111) {
          this.$message({
            message: '参数都提交完了，工单执行完成！',
            type: 'success'
          })
          API.getOne(this.$route.params.id).then(response => {
            this.eqList = response.data.other_eq
          })
        } else {
          this.$message.error(response.data.message)
        }
      })
    },
    bzHandle() {
      const reviewData = {
        'status': 2,
        'content': this.data.content,
        'id': this.$route.params.id
      }
      API.review(reviewData).then((response) => {
        if (response.data.error_code === 1) {
          this.$message({
            message: '恭喜你，提交成功',
            type: 'success'
          })
          this.reload()
        } else {
          this.$message.error(response.data.message)
        }
      })
    },
    bzBackHandle() {
      const reviewData = {
        'status': 21,
        'content': this.data.content,
        'id': this.$route.params.id
      }
      API.review(reviewData).then((response) => {
        if (response.data.error_code === 1) {
          this.$message({
            message: '恭喜你，提交成功',
            type: 'success'
          })
          this.reload()
        } else {
          this.$message.error(response.data.message)
        }
      })
    },
    engineerHandle() {
      const reviewData = {
        'status': 3,
        'content': this.data.content,
        'id': this.$route.params.id
      }
      API.review(reviewData).then((response) => {
        if (response.data.error_code === 1) {
          this.$message({
            message: '恭喜你，提交成功',
            type: 'success'
          })
          this.reload()
        } else {
          this.$message.error(response.data.message)
        }
      })
    },
    engineerBackHandle() {
      const reviewData = {
        'status': 22,
        'content': this.data.content,
        'id': this.$route.params.id
      }
      API.review(reviewData).then((response) => {
        if (response.data.error_code === 1) {
          this.$message({
            message: '恭喜你，提交成功',
            type: 'success'
          })
          this.reload()
        } else {
          this.$message.error(response.data.message)
        }
      })
    },
    goBack() {
      this.goUrl('/maintain/file_pm1')
    },
    changeStatus() {
      this.changePmStatus(API, this.data.id, this.qrcode_time, this.submit_complate, this.eqList)
    },
    equalSubmitComplate() {
      this.submit_complate = this.qrcode_time
    }
  }
}
</script>

<style>
.submit-reading{margin: 10px 0 0 10px;}
</style>
